<template>
	<view class="wanl-money">
		<view class="edgeInsetTop"></view>

		<!-- <div class="my-members">
			<div class="title">我的积分</div>
			<div class="cont-wraper">
				<div class="money" v-text="money"></div>
				<div class="right" v-on:click="score_exchange">
					<div class="level">积分兑换</div>
				</div>
			</div>
			<div class="desc">{{remark}}</div>
		</div> -->

		<view class="my-members">
			<view class="cont-wraper">
				<view class="money">
					<text class="title">积分</text>
					<view class="margin-top margin-bottom-xs">
						<text class="text-xxl">{{score}}</text>
					</view>
				</view>
				<view class="right">
					<view class="level" v-on:click="score_exchange">积分兑换</view>
					<view>{{remark}}</view>
				</view>
			</view>
		</view>

		<view class="cu-list menu-avatar" v-if="dataList">
			<view class="cu-item" v-for="(item, index) in dataList" :key="item.id" @tap="toMoney(item)">
				
				<view class="cu-avatar round bg-blue">
					<text class="wlIcon-baojiadan"></text>
				</view>
				<view class="content">
					<view class="text-sm flex">
						<view class="text-cut">
							{{item.remark}}
						</view>
					</view>
					<!-- <view class="wanl-gray text-sm text-bold">{{payType[item.type]}}</view> -->
					<view class="wanl-gray text-sm">
						{{item.add_time}}
					</view>
				</view>
				<view class="action">
					<view class="text-lg" :class="item.score > 0 ? 'wanl-orange' : 'wanl-black'"
					v-text="item.flag + item.score">
					</view>
				</view>
			</view>
		</view>
		<!-- 空 -->
		<view v-if="dataList.length == 0">
			<wanl-empty src="ticket_default3x" text="没找到任何账单明细" />
		</view>
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				score: 0,
				dataList: [],
				payType: {
					pay: '商品交易',
					groups: '拼团',
					recharge: '充值',
					withdraw: '提现',
					refund: '退款',
					sys: '系统',
				},
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				remark: '',
				money: ''
			};
		},
		onLoad() {
			this.loadData();
			this.getUser();
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			async getUser() {
				await uni.request({
					url: '/api/user/getUserInfo',
					method: 'POST',
					data: {
						token: uni.getStorageSync("wanlshop:user").token
					},
					success: res => {
						this.score = res.data.score;
						this.$store.commit('user/setUserInfo', {
							score: res.data.score
						});
					}
				});
			},
			async loadData() {
				await uni.request({
					url: '/api/User/scoreList',
					method: 'POST',
					data: {
						page: this.current_page,
						token: uni.getStorageSync("wanlshop:user").token
					},
					success: res => {
						uni.stopPullDownRefresh();

						if (res.data.list.length < 20) {
							this.status = 'noMore'
						}
						this.dataList = res.data.list.length < 20 ? res.data.list : this.dataList.concat(
							res.data.list); //数据 追加
						this.money = res.data.money
						this.remark = res.data.remark


						// this.total = res.data.total; //数据量
						// this.current_page = res.data.current_page; //当前页码
						// this.last_page = res.data.last_page; //总页码
						// this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			},
			exchange() {
				uni.showModal({
					title: '积分兑换',
					content: '确定兑换成金币吗？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
							this.score_exchange()
						} else {
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})
			},
			async score_exchange() {
				await uni.request({
					url: '/api/User/scoreExchange',
					method: 'POST',
					data: {
						token: uni.getStorageSync("wanlshop:user").token
					},
					success: res => {
						console.log(res)
					}
				});
			},
			toMoney(item) {
				this.$wanlshop.to(`/pages/user/money/details?data=${JSON.stringify(item)}`);
			}
		}
	};
</script>

<style>
	.level {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		padding: 5rpx;
		line-height: 28rpx;
		margin-right: 5rpx;
		border: 1px solid #ffffdc;
		background: none;
		color: #ffffdc;
		border-radius: 6rpx;
		padding: 10rpx 10rpx;
	}

	.my-members {
		width: 100%;
		background: rgba(0, 90, 147, 1);
		padding: 50rpx 30rpx;
		box-sizing: border-box;
	}

	.my-members .title {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 28rpx;
	}

	.cont-wraper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cont-wraper .money {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 56rpx;
	}

	.desc {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 28rpx;
	}

	.cont-wraper .right {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: rgba(255, 255, 255, 1);
	}

	.wanl-money .balance {
		margin: 10rpx 25rpx 25rpx 25rpx;
	}

	.wanl-money .balance .details {
		padding: 50rpx 0;
	}

	.wanl-money .balance .operate {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: rgba(0, 0, 0, 0.1);
		height: 80rpx;
		color: #fff;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item {
		height: 180rpx;
		align-items: flex-start;
		padding: 25rpx 0;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item .cu-avatar {
		width: 75rpx;
		height: 75rpx;
		left: 25rpx;
		margin-top: 6rpx;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item .content {
		left: 120rpx;
		width: calc(100% - 75rpx - 25rpx -150rpx);
		line-height: 1.5em;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item .action {
		width: 220rpx;
		text-align: right;
		padding-right: 25rpx;
	}
</style>